<script setup lang="ts">
import { ref } from 'vue'

interface Feature {
  id: number
  title: string
  description: string
  icon: string
}

const features = ref<Feature[]>([
  {
    id: 1,
    title: 'Vue 3',
    description: '使用Vue 3的Composition API进行响应式编程',
    icon: '🚀'
  },
  {
    id: 2,
    title: 'TypeScript',
    description: '使用TypeScript提供类型安全和更好的开发体验',
    icon: '📘'
  },
  {
    id: 3,
    title: 'Vite',
    description: '使用Vite作为构建工具，提供快速的开发体验',
    icon: '⚡'
  }
])
</script>

<template>
  <section class="content">
    <div class="container">
      <h2 class="section-title">主要特性</h2>
      <div class="features">
        <div v-for="feature in features" :key="feature.id" class="feature-card">
          <div class="feature-icon">{{ feature.icon }}</div>
          <h3 class="feature-title">{{ feature.title }}</h3>
          <p class="feature-description">{{ feature.description }}</p>
        </div>
      </div>
    </div>
  </section>
</template>

<style scoped>
.content {
  padding: 3rem 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.section-title {
  text-align: center;
  margin-bottom: 2rem;
  color: #2c3e50;
}

.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.feature-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.feature-title {
  margin-bottom: 0.5rem;
  color: #42b883;
}

.feature-description {
  color: #6c757d;
  line-height: 1.6;
}
</style>